<template>
  <div class="contaions">

    <div class="goodfriends">
      <!-- 头部搜索 -->
      <div class="head">
        <el-input v-model="findValue" class="w-50 m-2 ss" size="small" placeholder="搜一搜" :prefix-icon="Search"
          style="width: 7vw;height: 2.8vh;" />

        <div class="add">
          <el-icon size="24" color="white" style="margin: auto auto;">
            <CirclePlusFilled />
          </el-icon>
        </div>
      </div>
      <!-- friend -->
      <ul class="chatContaions" ref="nowChatListDom">
        <li v-for="item in chatStore.nowChatFriends" class="mouse" :id="item.id" @click="goChat(item.id)" :key="item.id">
          <div class="layout">
            <img :src="item.img" alt="" class="chattx">
            <div class="chatlist">
              <div class="timediv">
                <h3 class="username">{{ item.name }}</h3>
                <p class="time">{{ item.time }}</p>
              </div>
              <i class="wd" v-if="item.unread !== 0">{{ item.unread }}</i>
              <p class="cahtdetail"> {{ item.overMsg === '' ? '暂无' : item.overMsg }} </p>
            </div>
          </div>

        </li>

      </ul>
    </div>

    <div class="chat" v-if="chatStore.chating.id">
      <div class="chathead">

        <div class="tatle">
          <p>{{ chatStore.chating.name }}</p>

          <!-- <p >...</p> -->
          <el-popover placement="top-start" title="更多功能敬请期待。。" :width="200" trigger="click"
            content="this is content, this is content, this is content">
            <template #reference>
              <p class="mouse">...</p>
            </template>
            <a class="mouse" @click="closeNowChat">关闭对话</a>
          </el-popover>
        </div>

      </div>
      <div class="chatbody" id="gundong">
        <ul class="userul" ref="chatUl">
          <li v-for="(item, index) in chatStore.chating.msg"
            :class="item.from === userStore.user.id ? 'talk-right' : 'talk-left'" :key="index">
            <img :src="item.from === userStore.user.id ? userStore.user.img : chatStore.chating.img" alt="">
            <p id="speech-bubble">{{ item.text }}</p>
          </li>
  
        </ul>
      </div>
      <div class="chatfooter">
        <div class="emjor">
          <el-icon class="s">
            <Picture />
          </el-icon>
          <el-icon class="s">
            <Files />
          </el-icon>
        </div>
        <div class="msg">

          <textarea name="msg" id="" cols="30" rows="10" v-model="msg" @keyup.enter="sendMsg()"></textarea>
        </div>
        <div class="send">
          <el-button class="btn" @click="sendMsg()">发送</el-button>
        </div>
      </div>
    </div>
    <el-empty class="empty" v-if="!chatStore.chating.id" description="请点击好友开始聊天"
      style="background-color: #2c2b2b;"></el-empty>
  </div>
</template>




<script setup>
import { defineOptions, onMounted, ref, watch, unref, nextTick } from 'vue';
import { Search, CirclePlusFilled, Picture, Files } from '@element-plus/icons-vue'
import { useChatStore, useUserStore } from '@/stores'
import { removeNowChatService, sendMsgService } from '@/api/chat.js'
import { ElMessage } from 'element-plus';
const nowChatListDom = ref();
const chatStore = useChatStore();
const userStore = useUserStore();
const isEmpty = ref(true)
const msg = ref('');
const goChat = (id) => {
  console.log('点击', id)
  //窗口信息
  chatStore.setChating(id);
}
const chatUl = ref();
onMounted(async () => {
  changeXz(chatStore.chating.id);

})


const sendMsg = async () => {
  if (msg.value.trim() === '') {
    msg.value = '';

    return ElMessage.warning('请输入内容后再尝试发送');
  }
  let id = userStore.user.id

  let singleMsgReq = {
    "to": chatStore.chating.id,
    "text": msg.value
  }

  const { data: res } = await sendMsgService(singleMsgReq)
  if (res.code !== 200) {
    return ElMessage.error(res.msg);
  }
  chatStore.setSendMsg(id, msg.value)
  msg.value = '';
}
//关闭对话
const closeNowChat = () => {
  removeNowChatService(chatStore.chating.id)
  chatStore.removeNowChatFriendById(chatStore.chating.id)
}

watch(() => chatStore.chating, (newValue, oldValue) => {

  changeXz(newValue.id);
  nextTick(() => {
    let msg = document.getElementById('gundong') // 获取对象
    msg.scrollTop = msg.scrollHeight // 滚动高度
  })

}, {
  deep: true,
}
)
const changeXz = (id) => {
  //选中样式
  if (id === '') {
    for (let i = 0; i < nowChatListDom.value.children.length; i++) {
      nowChatListDom.value.children[i].classList.remove('xz');
    }
    return;
  }
  for (let i = 0; i < nowChatListDom.value.children.length; i++) {

    if (nowChatListDom.value.children[i].id + '' === id + '') {

      nowChatListDom.value.children[i].classList.add('xz')
    } else {
      nowChatListDom.value.children[i].classList.remove('xz')
    }
    //清除未读计数
    chatStore.removeunRead(id);
  }
}
defineOptions({
  name: 'chatweb'
})
const findValue = ref('')
</script>

<style lang="less" scoped>
.contaions {
  display: flex;
  width: 100%;
  height: 100%;

  .goodfriends {
    width: 14vw;
    min-width: 260px;

    .head {
      display: flex;
      justify-content: space-evenly;
      height: 5.5vh;
      vertical-align: middle;

      .ss,
      .add {
        margin-top: 2vh;

      }

      .add {
        display: flex;
        width: 3vh;
        height: 3vh;
        // background-color: #eee;
        ;
      }
    }

    .chatContaions {
      display: flex;
      flex-direction: column;
      width: 100%;

      overflow-y: scroll;

      li:hover {
        background-color: #857d7d;

      }

      // background-color: rgb(214, 214, 94);
      li {
        height: 5.5vh;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        position: relative;

        .layout {
          height: 4.5vh;
          width: 90%;
          display: flex;
          margin: auto 5%;

          p,
          h3 {
            white-space: nowrap;
          }

          .chatlist {
            margin: 0 3%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            flex: 1;

            .cahtdetail {
              font-size: 12px;
              color: #afa7a7;
            }

            .timediv {
              display: flex;
              justify-content: space-between;

              .username {
                font-size: 14px;
              }

              .time {
                font-size: 12px;
                color: #857d7d;
              }
            }


          }
        }


      }

      .chattx {
        height: 4.5vh;
        width: 4.5vh;
        border-radius: 10%;
      }
    }
  }

  .empty {
    flex: 1;
    height: 100%;
  }

  .chat {
    // background-color: skyblue;
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .chathead {
      height: 5.5vh;
      min-height: 40px;
      width: 100%;
      background-color: #3f3a3a;

      .tatle {
        display: flex;
        justify-content: space-between;
        width: 95%;
        margin: 1%;
        // background-color: yellow;
        line-height: 3.5vh;
        font-weight: 500;
        font-family: PingFangSC-Regular;

      }
    }

    .chatbody {
      width: 100%;
      height: 47vh;
      min-height: 500px;
      background-color: #1a1818;

      .userul {
        margin: 2%;

        // background-color: skyblue;
        // display: flex;
        li {
          display: flex;
          width: 100%;
          position: relative;
          font-family: PingFangSC-Regular;
          font-size: 15px;
          font-weight: 500;

        }

        li img {
          height: 4vh;
          width: 4vh;
          border-radius: 10%;
          margin-right: 10px;
        }

        .talk-left {
          margin-bottom: 10px;

          // position: relative;
          #speech-bubble {
            max-width: 45vh;
            // height: 35px;
            // height: 500px;
            margin-left: 10px;
            background: #666869;
            word-break: break-all;
            // position: relative;
            left: 25px;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 10px;
            // max-width: 500px;
            white-space: normal;
            padding: 8px;

          }

          #speech-bubble::before {
            content: "";
            position: absolute;
            width: 0;
            height: 0;
            border-top: 6px solid transparent;
            border-right: 12px solid #666869;
            border-bottom: 6px solid transparent;
            margin: 13px 0 0 -14px;
          }

        }

        .talk-right {
          margin-bottom: 10px;
          // text-align: right;
          justify-content: flex-end;
          color: #537940;

          img {
            position: absolute;
            right: 0;
            // padding-left: 65px;
          }

          p {
            margin-right: 65px;
          }

          #speech-bubble {
            max-width: 45vh;
            // height: 35px;
            // height: 500px;
            margin-left: 10px;
            background: #95ec69;
            word-break: break-all;
            // position: relative;
            left: 25px;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 10px;
            // max-width: 500px;
            white-space: normal;
            padding: 8px;

          }

          #speech-bubble::before {
            content: "";
            position: absolute;
            width: 0;
            height: 0;
            border-top: 6px solid transparent;
            border-left: 12px solid #95ec69;
            border-bottom: 6px solid transparent;
            right: 0;
            transform: translate(-498%, 70%);
            // margin: -50px 0 0 200px;
            // margin: 0 0 0 0;
          }
        }
      }
    }

    .chatfooter {
      background-color: #292828;
      width: 100%;
      // height: 25%;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .emjor {
        display: flex;
        width: 95%;
        margin: 0.5%;

        .s {
          margin-right: 10px;
          font-size: 20px;
        }
      }

      .msg {

        width: 100%;

        flex: 1;
        height: 80px;

        textarea {
          margin: 0.5% 1%;
          border: 0; //去除边框
          background-color: transparent; //透明
          outline: none; //去除鼠标获取焦点时的边框
          width: 95%;
          height: 86%;
          font-size: 15px;
          font-family: "宋体";
          color: #e0dcdc;

        }
      }

      .send {
        display: flex;
        justify-content: end;
        width: 95%;
        height: 45px;

        // height: 100%;
        // max-height: 4%;
        // bottom: 5px;
        .btn {
          background-color: #3f3a3a;
          color: #eee;
          height: 25px;
          width: 80px;
        }

      }
    }
  }

  .xz {
    background-color: #585050;

  }

  // 未读消息
  .wd {
    display: flex;
    background: #e24242;
    border-radius: 50%;
    width: 12px;
    height: 12px;

    left: 0;
    bottom: 0;
    position: absolute;
    text-align: center;
    align-content: center;
    justify-content: center;
    // padding-top: 3px;
    font-size: 10px;
    font-family: SimSun;
    color: #8dc8eb;
    transform: translate(1950%, -55%);

  }

}</style>